<template>
	<view>
		<swiper class="banner" indicator-dots="true" indicator-color="#E4E4E4" indicator-active-color="#D7A068"
			autoplay="true" circular="true">
			<block v-for="(item, index) in goodsCarouselPictures" :key="index">
				<swiper-item>
					<!-- 图片尺寸750*814 -->
                     <view :style="`background-image:url(${uniConfig.ssoPath + item.logo})`" class="banner-img"></view>
				</swiper-item>
			</block>
		</swiper>

		<view class="good-head">
			<view class="name">
				{{goods.name}}
			</view>
            <view class="price">
				<text>￥</text>
				<text class="t1">{{goods.price}}</text>
				<!-- <text class="t2">券后</text>
				<text class="t3">￥{{goods.marketPrice}}</text> -->
			</view>
		</view>

		<view class="detail">
			<view class="title">商品详情</view>
			<view class="cont">
                <uv-parse :content="goods.introduction" :tagStyle="parseStyle"></uv-parse>
			</view>
		</view>
		<view class="footer">
            <view class="footer_action" @click="navigatorToCart">
                <uv-icon size="32" name="shopping-cart-fill"></uv-icon>
                购物车<text class="dracount">{{ cartCount }}</text>
            </view>
            <view class="footer_btn_box">
                <view class="btn" @click="openType(true)">加入购物车</view>
			    <view class="btn" @click="openType(false)">立即购买</view>
            </view>
		</view>
        <uv-popup ref="popupRef" round="12" mode="bottom" 
            custom-style="height: 50vh;" 
            bgColor="#f5f5f5" 
            :closeable="true"
            @change="changeVisibliy"
            closeIconPos="top-right">
			<Sku :skus="skus" :goods="goods" :isAddCart="isAddCart" @change="addCart" v-if="isVisibliy"/>
		</uv-popup>
	</view>
</template>
<script setup lang="ts">
import { ref ,getCurrentInstance } from 'vue'
import { onLoad , onShow} from "@dcloudio/uni-app"
import { getProduct , getSkuCartCount , addSkuCart } from "@/api/product"
import { uniConfig } from '@/config/index'
import Sku from '@/components/sku'
const cartCount = ref<any>(0)
const popupRef = ref()
const goods = ref<any>({})
const skus = ref<any>([])
const goodsCarouselPictures = ref<any>([])
const isAddCart = ref<any>(false)
const parseStyle = ref<any>(
  {
    // 字符串的形式
    p: 'font-size:32rpx',
    span: 'font-size: 32rpx',
    img:'max-width: 100%;height: auto;'
  }
) 
const isVisibliy = ref<any>(false)
const changeVisibliy = (e : any) => {
    isVisibliy.value = e.show
}
const openType = (res : any) => {
    isAddCart.value = res;
    popupRef.value.open()
}
const navigatorToCart = () => {
    uni.navigateTo({url:'/pages/mall/skuCart'})
}
const addCart = (sku : any) => {
    addSkuCart({
        skuId:sku.skuId,
        qty:sku.qty
    }).then(res => {
        if(res.success){
            uni.showToast({icon:'success','title':'添加成功！'});
            getCartCount()
            popupRef.value.close()
        }else uni.showToast({icon:'none',title:res.msg})
    })
}
const getCartCount = () => {
    getSkuCartCount({}).then(res => {
        cartCount.value = res.data
    })
}
onLoad(async (options : any) => {
    const { proxy } = getCurrentInstance();
    await proxy.$onLaunched;
    getProduct({productId : options.productId}).then(res => {
        const {product,pictureList,canAddCart,skuList} = res.data
        goods.value = product
        skus.value = skuList
        goodsCarouselPictures.value = pictureList
        isAddCart.value = canAddCart
    })
})
onShow(() => {
    getCartCount()
})
</script>
<style lang="scss">
page {
    background-color: #f1f1f1;
    padding-bottom: 160upx;
    box-sizing: border-box;
}

.banner {
    height: 100vw;
    width: 100%;
    
}
.banner-img {
    width: 100%;
    height:  100vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.good-head {
    margin: 26upx;
    border-radius: 20upx;
    box-sizing: border-box;
    background-color: #fff;
    .price {
		color: $uni-color-primary;
		font-size: 42upx;
		width: 100%;
		padding: 0 32upx 32upx;
		box-sizing: border-box;
		font-weight: 600;
        .t1 {
            font-size: 52upx;
        }
        .t2 {
            font-size: 28upx;
            margin-left: 16upx;
        }
        .t3 {
            font-size: 28upx;
            color: #999999;
            margin-left: 16upx;
            text-decoration: line-through;
        }
	}
    .name {
		font-size: 32upx;
		font-weight: 600;
		padding:32upx;
		box-sizing: border-box;
	}
    .mid {
		padding: 0 32upx 29upx 32upx;
		border-bottom: 1px solid #EBECEC;
	}
    .mid .left {
		float: left;
		border: 1px solid #FA4323;
		border-radius: 10upx;
		overflow: hidden;
		color: #FA4323;
		line-height: 30upx;
		font-size: 20upx;
		float: left;
		padding-right: 8upx;
	}
    .mid .left text {
		background-color: #FA4323;
		color: #ffffff;
		display: inline-block;
		width: 30upx;
		height: 30upx;
		text-align: center;
		margin-right: 5upx;
	}
    .mid .right {
		float: right;
		font-size: 24upx;
		color: #999999;
	}
    .mid .right .iconfont {
		font-size: 22upx;
		display: inline-block;
		margin-left: 10upx;
	}
    .mid .right .top {
		transform: rotate(90deg);
	}
    .mid .right .bottom {
		transform: rotate(-90deg);
	}
    .mid .couponBox {
		width: 644upx;
		height: 125upx;
		margin: 24upx auto 0 auto;
		position: relative;
	}
    .mid .couponBox .couponBg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
	}
    .mid .couponBox .money {
		z-index: 10;
		width: 180upx;
		line-height: 125upx;
		color: #FB3E2B;
		position: absolute;
		left: 0;
		text-align: center;
		font-size: 37upx;
		font-weight: bold;
	}
    .mid .couponBox .money text {
		font-size: 59upx;
	}
    .mid .couponBox .tt {
		position: absolute;
		left: 180upx;
		z-index: 10;
		box-sizing: border-box;
		padding: 28upx 48upx;
	}
    .mid .couponBox .tt .top {
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
	}
    .mid .couponBox .tt .date {
		font-size: 24upx;
		color: #999999;
	}
    .ass {
		height: 72upx;
		line-height: 72upx;

        .icon1 {
            height: 30upx;
            margin: 24upx 0 0 37upx;
            float: left;
        }

        text {
            font-size: 22upx;
            margin-left: 9upx;
        }

        .icon {
            display: inline-block;
            line-height: 72upx;
            font-size: 22upx;
            margin-left: 35upx;
        }
        .icon .iconfont {
            font-size: 24upx;
            margin-right: 5upx;
            display: inline-block;
        }
	}
}
.shop {
    width: 702upx;
    height: 128upx;
    line-height: 128upx;
    margin: 26upx auto;
    background-color: #fff;
    border-radius: 20upx;
    padding: 0 26upx;
    box-sizing: border-box;
}

.shop .logo {
    width: 82upx;
    height: 82upx;
    border-radius: 50%;
    margin-top: 23upx;
    float: left;
}

.shop .shopName {
    display: inline-block;
    font-size: 32upx;
    color: #565656;
    margin-left: 17upx;
    width: 400upx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop .more {
    float: right;
    height: 50upx;
    line-height: 50upx;
    width: 145upx;
    margin-top: 39upx;
    text-align: center;
    color: #DA9B65;
    font-size: 24upx;
    border: 1px solid #DA9B65;
    border-radius: 50upx;
}

.about {
    width: 702upx;
    margin: 26upx auto;
    background-color: #fff;
    border-radius: 20upx;
    padding: 0 26upx 10upx 26upx;
    box-sizing: border-box;

}

.about .title {
    line-height: 88upx;
    font-size: 32upx;
    font-weight: bold;
}

.about .list {
    width: 100%;
    height: 390upx;
}

.about .list .list_item {
    display: flex;
    justify-content: space-around;
}

.about .list .list_item .item {
    width: 200upx;
}

.about .list .list_item .item .img {
    width: 200upx;
    height: 200upx;
    border-radius: 10upx;
    display: block;
    margin: 0 auto;
}


.about .list .list_item .item .name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 30upx;
    font-size: 24upx;
    margin: 14upx 0;
}

.about .list .list_item .item .price {
    color: #FA4323;
    font-size: 24upx;
}

.about .list .list_item .item .price text {
    font-size: 32upx;
}

.detail {
    width: 702upx;
    margin: 26upx auto;
    box-sizing: border-box;
    background:#fff;
    border-radius: 9px;
}

.detail .title {
    line-height: 88upx;
    font-size: 32upx;
    font-weight: bold;
    padding: 0 26upx;
    background-color: #fff;
    border-top-left-radius: 20upx;
    border-top-right-radius: 20upx;
}

.detail .cont .img {
    width: 100%;
    display: block;
}

.footer {
    height: 118upx;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content:space-between;
    box-sizing: border-box;
    padding: 0 24upx;
    z-index: 11;
    align-items:center;
}

.footer .collect {
    padding-top: 28upx;
    font-size: 22upx;
}

.footer .collect .iconfont {
    display: block;
    font-size: 33upx;
    margin-bottom: 5upx;
}

.footer .collect .icon-shoucang-shoucang {
    color: #F3AC67;
}

.footer .btn {
    height: 88upx;
    line-height: 88upx;
    margin-top: 0upx;
    font-size: 32upx;
    border-radius: 50upx;
    padding:0 52upx;
}
.footer .btn:first-child{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background:rgb(35,58,154);
}
.footer .btn:last-child{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background:rgb(245,238,182);
}

.footer_action{
    position: relative;
    padding:0 32upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26upx;
}

.footer_action .dracount{
    position: absolute;
    height: 34rpx;
    line-height: 34rpx;
    padding: 0 12rpx;
    font-size: 24rpx;
    color: #fff;
    background: red;
    right: 3px;
    top: -16rpx;
    border-radius: 50px;
}
.footer_btn_box{
    display: flex;
    align-items: center;
    color:#fff;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    background: rgba(0, 0, 0, 0.5);
}

.shareBox {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    border-top-left-radius: 42upx;
    border-top-right-radius: 42upx;
}

.shareBox .top {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 22upx 0;
}

.shareBox .top .btn {
    font-size: 25upx !important;
    font-weight: normal !important;
    background-color: #fff;
    text-align: center;
    color: #333333;
}

.shareBox .top .btn::after {
    border: none !important;
}

.shareBox .top .btn .icon {
    height: 100upx;
    display: block;
    margin: 0 auto 19upx auto;
}

.shareBox .closeBtn {
    width: 670upx;
    text-align: center;
    font-size: 28upx;
    background-color: #ffffff;
    line-height: 100upx;
    border-radius: 50upx;
    color: #666666;
    margin: 0 auto;
}

.panel {
    width: 702upx;
    margin: 22upx auto;
    background-color: #fff;
    border-radius: 20upx;
    font-size: 28upx;
}

.panel .title {
    padding: 26upx 34upx;
    font-weight: bold;
}

.panel .cont {
    padding: 0 34upx 26upx 34upx;
}

.panel .cont .titl {
    color: #666666;
    margin-top: 28upx;
}

.panel .cont .p {
    color: #999999;
}

.noMore {
    text-align: center;
    color: #999999;
    font-size: 28upx;
    margin: 28upx 0;
}
</style>